<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Realm - Analytics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Bluth Company">
    <link rel="shortcut icon" href="assets/ico/favicon.html">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/theme.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/alertify.css" rel="stylesheet">
    <link rel="Favicon Icon" href="favicon.ico">
    <link href="http://fonts.useso.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="wrap">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <div class="logo">
            <img src="assets/img/logo.png" alt="Realm Admin Template">
          </div>
           <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
           <a class="btn btn-navbar slide_menu_left visible-tablet">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

          <div class="top-menu visible-desktop">
            <ul class="pull-left">
              <li><a id="messages" data-notification="2" href="#"><i class="icon-envelope"></i> Messages</a></li>
              <li><a id="notifications" data-notification="3" href="#"><i class="icon-globe"></i> Notifications</a></li>
            </ul>
            <ul class="pull-right">  
              <li><a href="login.html"><i class="icon-off"></i> Logout</a></li>
            </ul>
          </div>

          <div class="top-menu visible-phone visible-tablet">
            <ul class="pull-right">  
              <li><a title="link to View all Messages page, no popover in phone view or tablet" href="#"><i class="icon-envelope"></i></a></li>
              <li><a title="link to View all Notifications page, no popover in phone view or tablet" href="#"><i class="icon-globe"></i></a></li>
              <li><a href="login.html"><i class="icon-off"></i></a></li>
            </ul>
          </div>

        </div>
      </div>
    </div>

    <div class="container-fluid">

      <!-- Side menu -->  
      <div class="sidebar-nav nav-collapse collapse">
        <div class="user_side clearfix">
          <img src="assets/img/odinn.jpg" alt="Odinn god of Thunder">
          <h5>Odinn</h5>
          <a href="#"><i class="icon-cog"></i> Settings</a>        
        </div>
        <div class="accordion" id="accordion2">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_F79999" href="index-2.html"><i class="icon-dashboard"></i> <span>Dashboard</span></a>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_C3F7A7 collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse1"><i class="icon-magic"></i> <span>Features</span></a>
            </div>
            <div id="collapse1" class="accordion-body collapse">
              <div class="accordion-inner">
                <a class="accordion-toggle" href="ui_features.html"><i class="icon-star"></i> UI Features</a>
                <a class="accordion-toggle" href="forms.html"><i class="icon-list-alt"></i> Forms</a>
                <a class="accordion-toggle" href="tables.html"><i class="icon-table"></i> Tables</a>
                <a class="accordion-toggle" href="buttons.html"><i class="icon-circle"></i> Buttons</a>
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_9FDDF6 collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2"><i class="icon-reorder"></i> <span>Components</span></a>
            </div>
            <div id="collapse2" class="accordion-body collapse">
              <div class="accordion-inner">
                <a class="accordion-toggle" href="notifications.html"><i class="icon-rss"></i> Notifications</a>
                <a class="accordion-toggle" href="calendar.html"><i class="icon-calendar"></i> Calendar</a>
                <a class="accordion-toggle" href="gallery.html"><i class="icon-picture"></i> Gallery</a>
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_F6F1A2" href="tasks.html"><i class="icon-tasks"></i> <span>Tasks</span></a>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_C1F8A9 active" href="analytics.html"><i class="icon-bar-chart"></i> <span>Analytics</span></a>
            </div>
          </div> 
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_9FDDF6" href="tickets.html"><i class="icon-bullhorn"></i> <span>Support Tickets</span></a>
            </div>
          </div> 
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle b_F5C294" href="users.html"><i class="icon-user"></i> <span>Users</span></a>
            </div>
          </div>      
        </div>
      </div>
      <!-- /Side menu -->

      <!-- Main window -->  
      <div class="main_container" id="analytics_page">
        <div class="row-fluid">
          <ul class="breadcrumb">
            <li><a href="#">Home</a> <span class="divider">/</span></li>
            <li><a href="#">Pages</a> <span class="divider">/</span></li>
            <li class="active">Analytics</li>
          </ul>
          <h2 class="heading">
                Analytics
                <div class="btn-group pull-right">
                  <button class="btn"><i class="icon-download-alt"></i> Export</button>
                  <button class="btn"><i class="icon-envelope"></i> Email</button>
                  <a href="http://www.oesmith.co.uk/morris.js/" target="_blank" class="btn"><i class="icon-external-link"></i> Documentation</a>
                </div>
          </h2>
        </div>

        <!-- HEADER -->
          <div class="row-fluid">
            <div class="widget-top widget widget-padding">
              <div class="widget-header"><i class="icon-signal"></i><h5>Donut Chart</h5>
              <div class="widget-buttons">
                  <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
              </div>
              </div>
              <div class="widget-body">
                <div id="donut" class="circle" style="height:200px; width:200px; background-color:white; border-radius:100px;"></div>
                <div id="donut2" class="circle" style="height:200px; width:200px; background-color:white; border-radius:100px;"></div>
                <div id="donut3" class="circle" style="height:200px; width:200px; background-color:white; border-radius:100px;"></div>
                <div id="donut4" class="circle" style="height:200px; width:200px; background-color:white; border-radius:100px;"></div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="widget span12">
              <div class="widget-header"><i class="icon-signal"></i><h5>Area Chart</h5>
              <div class="widget-buttons">
                  <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
              </div>
              </div>
              <div class="widget-body clearfix" style="border-top:1px solid #DDD;">
                <div class="analytics_item" id="areachart"></div>
              </div>
            </div>
          </div>
          <div class="row-fluid">
            <div class="widget span12">
              <div class="widget-header"><i class="icon-signal"></i><h5>Double Area Chart</h5>
              <div class="widget-buttons">
                  <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
              </div>
              </div>
              <div class="widget-body clearfix" style="border-top:1px solid #DDD;">
                <div class="analytics_item" id="areachart2"></div>
              </div>
            </div>
          </div>
          <div class="row-fluid">
            <div class="widget span12">
              <div class="widget-header"><i class="icon-signal"></i><h5>Line Chart</h5>
              <div class="widget-buttons">
                  <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
              </div>
              </div>
              <div class="widget-body clearfix" style="border-top:1px solid #DDD;">
                <div class="analytics_item" id="linechart"></div>
              </div>
            </div>
          </div>
          <div class="row-fluid">
            <div class="widget span12">
              <div class="widget-header"><i class="icon-signal"></i><h5>Double Line Chart</h5>
              <div class="widget-buttons">
                  <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
              </div>
              </div>
              <div class="widget-body clearfix" style="border-top:1px solid #DDD;">
                <div class="analytics_item" id="linechart2"></div>
              </div>
            </div>
          </div>
          <div class="row-fluid">
            <div class="widget span12">
              <div class="widget-header"><i class="icon-signal"></i><h5>Bar Chart</h5>
              <div class="widget-buttons">
                  <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
              </div>
              </div>
              <div class="widget-body clearfix" style="border-top:1px solid #DDD;">
                <div class="analytics_item" id="barchart"></div>
              </div>
            </div>
          </div>
          <div class="row-fluid">
              <div class="widget span4">
                  <div class="widget-header">
                      <i class="icon-list"></i>
                      <h5>Statistics</h5>
                      <div class="widget-buttons">
                        <a href="http://omnipotent.net/jquery.sparkline/" data-title="Documentation" class="tip" target="_blank"><i class="icon-external-link"></i></a>
                        <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
                      </div>
                   </div>  
                  <div class="widget-body clearfix" id="widget-analytics" style="height: 300px; overflow:hidden;">
                      <div class="widget-analytics-small">
                        <ul>
                          <li>
                            <span class="inlinesparkline">1,5,10,5,25,30,12,22</span>
                            <h5>Visits:</h5>
                            <h4>502</h4>
                          </li>
                          <li>
                            <span class="inlinesparkline">5,4,5,7,8,1,1,20,2</span>
                            <h5>Unique Visitors:</h5>
                            <h4>420</h4>
                          </li>
                          <li>
                            <span class="inlinesparkline">5,3,3,98,102,155,150,187,196</span>
                            <h5>Pageviews:</h5>
                            <h4>2054</h4>
                          </li>
                          <li>
                            <span class="inlinesparkline">5,44,53,66,378,771,341,520,452</span>
                            <h5>Pages / Visit:</h5>
                            <h4>5.8</h4>
                          </li>
                          <li>
                            <span class="inlinesparkline">5,4,35,57,28,16,11,20,72</span>
                            <h5>Avg. Visit Duration:</h5>
                            <h4>00:10:34</h4>
                          </li>
                          <li>
                            <span class="inlinesparkline">52,44,65,27,86,14,16,40,22</span>
                            <h5>Bounce Rate:</h5>
                            <h4>30.30%</h4>
                          </li>
                          <li>
                            <span class="inlinesparkline">5,6,7,9,10,20,25,22,21</span>
                            <h5>% New Visits:</h5>
                            <h4>29.35%</h4>
                          </li>
                        </ul>
                      </div>
                  </div> <!-- /widget body -->
              </div> <!-- /widget span4 -->
              <div class="widget span4">
                <div class="widget-header"><i class="icon-signal"></i><h5>Browsers</h5>
                  <div class="widget-buttons">
                      <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
                  </div>
                </div>
                <div class="widget-body clearfix" style="height: 300px;">
                  <table class="table table-striped">
                    <thead>
                        <tr>
                          <th>Browser</th>
                          <th>Visits</th>
                        </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>Firefox</td>
                        <td>5798</td>
                      </tr>
                      <tr>
                        <td>Chrome</td>
                        <td>4855</td>
                      </tr>
                      <tr>
                        <td>Internet Explorer</td>
                        <td>2877</td>
                      </tr>
                      <tr>
                        <td>Safari</td>
                        <td>2705</td>
                      </tr>
                      <tr>
                        <td>Opera</td>
                        <td>1985</td>
                      </tr>
                      <tr>
                        <td>Android Browser</td>
                        <td>850</td>
                      </tr>
                      <tr>
                        <td>Rockmelt</td>
                        <td>310</td>
                      </tr>
                    </tbody>      
                  </table>
                </div>
              </div>
              <div class="widget span4">
                <div class="widget-header"><i class="icon-signal"></i><h5>Most active pages</h5>
                  <div class="widget-buttons">
                      <a href="#" data-title="Collapse" data-collapsed="false" class="tip collapse"><i class="icon-chevron-up"></i></a>
                  </div>
                </div>
                <div class="widget-body clearfix" style="height: 300px;">
                  <table class="table table-striped">
                    <thead>
                        <tr>
                          <th>Page</th>
                          <th>Visits</th>
                        </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>Categories</td>
                        <td>8790</td>
                      </tr>
                      <tr>
                        <td>Clothing</td>
                        <td>7052</td>
                      </tr>
                      <tr>
                        <td>About</td>
                        <td>6577</td>
                      </tr>
                      <tr>
                        <td>Contact Us</td>
                        <td>5760</td>
                      </tr>
                      <tr>
                        <td>Blog</td>
                        <td>4876</td>
                      </tr>
                      <tr>
                        <td>Terms of Service</td>
                        <td>1503</td>
                      </tr>
                      <tr>
                        <td>Support Center</td>
                        <td>7523</td>
                      </tr>
                    </tbody>      
                  </table>
                </div>
              </div>
          </div> <!-- /row-fluid -->
      </div>
      <!-- /Main window -->  

      </div><!--/.fluid-container-->
    </div><!-- wrap ends-->

    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="assets/js/raphael-min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src='assets/js/sparkline.js'></script>
    <script type="text/javascript" src='assets/js/morris.min.js'></script>
    <script type="text/javascript" src="assets/js/jquery.dataTables.min.js"></script>   
    <script type="text/javascript" src="assets/js/jquery.masonry.min.js"></script>   
    <script type="text/javascript" src="assets/js/jquery.imagesloaded.min.js"></script>   
    <script type="text/javascript" src="assets/js/jquery.facybox.js"></script>   
    <script type="text/javascript" src="assets/js/jquery.alertify.min.js"></script> 
    <script type="text/javascript" src="assets/js/jquery.knob.js"></script>
    <script type='text/javascript' src='assets/js/fullcalendar.min.js'></script>
    <script type="text/javascript" src="assets/js/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="assets/js/realm.js"></script>
  </body>
</html>
